<template>
  <a-list
    item-layout="vertical"
    size="large"
    :pagination="false"
    :data-source="listData"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <template #actions>
          <span>
            {{ item.author }}
          </span>
          <span id="collection" @click="collection(item)">
            <StarOutlined />
            {{ item.collectionNum }}
          </span>
          <span id="likes" @click="like(item)">
            <LikeOutlined />
            {{ item.likeNum }}
          </span>
          <span>
            <MessageOutlined />
            {{ item.commentNum }}
          </span>
          <span>
            <EyeOutlined />
            {{ item.viewNum }}
          </span>
        </template>
        <template #extra>
          <span v-if="item.coverImg != null">
            <img width="180" alt="logo" :src="item.coverImg" />
          </span>
          <span v-else></span>
        </template>
        <a-list-item-meta :description="item.description">
          <template #title>
            <a-tag color="cyan">标签</a-tag>
            <span id="AsTitle" @click="gotoContent(item)">
              {{ item.title }}
            </span>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>
<script>
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import { doLike, doCollection } from "../../api/article";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
    EyeOutlined,
  },

  props: ["listdata"],

  setup(props) {
    const listData = ref(props.listdata);
    // console.log(props.listdata);
    const router = useRouter();

    const gotoContent = (item) => {
      // console.log(item);
      sessionStorage.setItem("AID", item.aid);
      router.push({ path: "/contentPage" });
    };

    const like = (item) => {
      // console.log(item.aid);
      doLike({
        url: "/article/doLike",
        aid: item.aid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const collection = (item) => {
      // console.log(item.aid);
      doCollection({
        url: "/article/doCollection",
        aid: item.aid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const pagination = {
      onChange: (page) => {
        console.log(page);
      },
      pageSize: 3,
    };

    return {
      listData,
      pagination,
      like,
      collection,
      gotoContent,
    };
  },
});
</script>

<style scoped>
#AsTitle {
  color: black;
}
#AsTitle:hover {
  color: #005177;
  cursor: pointer;
}
</style>